<template>
  <div class="info-container">
    <div class="box-container"  ref="content">
      <el-page-header @back="goBack" title="返回人才列表" style="margin-left:10px;height:20px"></el-page-header>

      <el-descriptions class="margin-top description" title="人才详情"  :column="1" :size="'medium'" :colon="true" border>

        <template slot="extra">
          <el-button type="primary" size="small" @click="toPdf">导出</el-button>
        </template>

        <el-descriptions-item label="头像">
          <el-avatar :src="person.avatar" ></el-avatar>
        </el-descriptions-item>

        <el-descriptions-item label="姓名">
          <span class="desc-text"> {{ person.name }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="性别">
          <span class="desc-text"> {{person.sex === 0?'男':'女'}} </span>
        </el-descriptions-item>

        <el-descriptions-item label="年龄">
          <span class="desc-text"> {{ person.age }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="手机号">
          <span class="desc-text"> {{ person.phone }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="当前住址">
          <span class="desc-text"> {{ person.address }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="籍贯">
          <span class="desc-text"> {{ person.nativePlace }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="邮箱">
          <span class="desc-text"> {{ person.email }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="政治面貌">
          <span class="desc-text"> {{ person.politicCountenanceStr }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="学历">
          <span class="desc-text"> {{ person.educationStr }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="毕业学校">
          <span class="desc-text"> {{ person.graduationSchool }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="期望岗位">
          <span class="desc-text"> {{ person.expectedPosition }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="期望薪资">
          <span class="desc-text"> {{ person.expectedSalary }} </span>
        </el-descriptions-item>

        <el-descriptions-item label="工作经历" v-for="item in person.works">
          <span class="desc-text"> 原公司 {{ item.companyName }} </span>
          <span class="desc-text"> 原岗位 {{ item.position }}</span>
          <span class="desc-text"> 工作时长 {{ item.workTime }} </span>
          <span class="desc-text"> 周期范围 {{ item.dateTime }} </span>
          <span class="desc-text"> 薪资 {{ item.salary }} </span>
        </el-descriptions-item>

      </el-descriptions>

    </div>
  </div>
</template>

<script>
import {selectPersonInfoById} from '@/api/personnel'

export default {
  data(){
    return{
      id:'',
      size:'',
      person:{}
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getByIdInfo()
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    toPdf(){
      this.$PDFSave(this.$refs["content"], this.person.name);
    },
    async getByIdInfo(){
     const {data:res} = await selectPersonInfoById(this.id)
      console.log(res)
      this.person = res.data
    }
  }
}
</script>

<style scoped>
.info-container{
  position:relative;
  height:100%;
  width: 100%;
}
.description{
  margin:2% 25% 0 25%;
  font-weight: 700;
  font-size: 14px;
}
.desc-text{
  font-size: 12px;
  padding-left: 30px;
}

</style>
